@import "reset.scss";
@import "common.scss";
@import "../utils/iconfont/iconfont.css";

@function getvw($w){
    @return ($w / 750) * 100 + vw;
}
@function getvmin($vmin){
    @return ($vmin / 750) * 100 + vmin;
}
@keyframes tran{
    100%{
        transform:translate(getvw(-1560));
    }
}
@keyframes absolt{
    100%{
        transform: translate(getvw(100));
    }
}
// @keyframes absol{
//     0%{
//         position:0 0;
//     }
//     100%{
//         position:getvw(120) 0;
//     }
// }
.wrap{
    header{
        width:getvw(750);
        .header_banner{
            width: getvw(704);
            overflow: hidden;
            >ul{
                width:200%;
                margin: getvw(18) 0;
                display: flex;
                justify-content: space-evenly;
                animation:tran 8s steps(9) 3s infinite;
                >li{
                    width: getvw(148);
                    text-align: center;
                    >img{
                        width: 100%;
                        display: block;
                    }
                    >span{
                        display: block;
                        font-size: getvmin(26);
                        margin-top:getvw(10);

                    }
                }
            }
        }
        .ziro{
            >ul{
                display: flex;
                justify-content: center;
                position: relative;
                &::after{
                    content: "";
                    display: block;
                    width: getvw(30);
                    height: getvw(30);
                    margin-left: getvw(10);
                    border-radius:50%;
                    background-color:#ff9344;
                    position: absolute;
                    left: 50%;
                    transform: translate(getvw(-100));
                    animation: absolt 3s steps(4) infinite, absol 3s steps(4) infinite;
                }
                >li{
                    width: getvw(30);
                    height: getvw(30);
                    margin:0 getvw(10);
                    border-radius:50%;
                    background-color: pink;
                    // &:hover{
                    //     background-color:#ff9344;
                    // }
                }
                
            }
        }
    }
    main{
        width: getvw(704);
        margin:0 auto;
        .main_flex{
            .main_left{
                .left_icon{
                    font-size: getvw(80);
                    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                }
                >span{
                    text-indent: getvw(-20);
                }
            }
        }
        .main-img{
            margin-top:getvw(35) ;
            display: flex;
            justify-content: space-between;
            .main-imgbox{
                width: getvw(133);
                >img{
                    width: 100%;
                    display: block;
                }
            }
        }
    }
}